<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="Author" content="TanShenghu">
    <title>高版本浏览器可选择vue下拉框 搜索</title>
    <link rel="stylesheet" href="https://s.tbcdn.cn/g/platform/common/s/1.0/global/global.css">
    <style>
        *{margin:0;padding:0;}
        body{height:3000px;padding-left:50px;}
        .expand-transition {
          transition: all .3s ease;
          background-color: #eee;
        }
        hr{margin:30px auto;}
        #controller{}
        li{list-style:none}
        ol li{cursor:pointer;height:28px;line-height:28px;padding-left:5px;padding-right:5px;}
        ol li:hover{background-color:#f1f1f1;}
        
        .v-searchList{display:inline-block;position:relative;border:1px solid #ccc;height:30px;font-size:12px;}
        .v-searchList [type="text"]{padding-left:7px;padding-right:7px;box-sizing:border-box;}
        .v-searchList>[type="text"]{border:0;height:100%;line-height:30px;box-sizing:border-box;}
        .v-searchList>button{border:none;cursor:pointer;height:100%;background-color:transparent;border-left:1px solid #ccc;padding-left:3px;padding-right:3px;}
        .v-searchList .searchList{position:absolute;z-index:20;left:-1px;width:100%;background:white;border:1px solid #ccc;top:35px;}
        .v-searchList .searchList .strict{text-align:center;padding-top:5px;padding-bottom:5px;}
        .v-searchList .searchList [type="text"]{border:1px solid #ccc;height:28px;line-height:28px;border-radius:3px;width:95%;}
        .v-searchList .searchList ol{max-height:230px;overflow-y:auto;}
        .v-searchList .searchList ol+p{color:#666;text-align:right;padding-right:7px;line-height:23px}
        .v-searchList .searchList p var{color:orange;}
        .v-searchList li .kw{color:orange;}
    </style>
    <script src="https://a.alipayobjects.com/seajs/seajs/2.2.0/sea.js"></script>
    <script>
    seajs.config({
      paths: {
        'jquery': 'https://a.alipayobjects.com/jquery',
        'gallery': 'https://a.alipayobjects.com/gallery',
        'widget': 'http://www.tanshenghu.com/widget'
      },    
      alias: {
        '$': 'jquery/jquery/1.8.2/jquery',
        'vue': '../examples/vue',
        'searchList': '../src/searchList-vue'
      }
    });
    </script>
</head>
<body>
    <pre>
    如果是要测试请将下面的数据拷下来保存至跟html同级目录下取名data.json
    {
        "content":{
            "data":[
                {"id":"1","name":"张三","sex":"男","address":"武当山"},
                {"id":"2","name":"张三丰","sex":"男","address":"武当山"},
                {"id":"3","name":"张君宝","sex":"男","address":"武当山"},
                {"id":"4","name":"张翠山","sex":"男","address":"武当山"},
                {"id":"5","name":"张东西","sex":"男","address":"武当山"},
                {"id":"6","name":"张无忌","sex":"男","address":"光明顶"}
            ]
        },
        "hasError":false
    }
    </pre>
    <hr>
    
    <div id="controller"></div>
    <hr>
    <div id="app"></div>
    
    <script>
    seajs.use(['$','searchList'], function( $, SearchList ){
        
        var vm = SearchList({
            el: '#controller', // 容器
            url: '/search.php', // 数据接口地址
            structure: 'content', // 数据结构
            fieldName: "name", // 列表对应的key->value
            keyword: 'kw', // 请求数据参数字段名
            strict: true, // 是否严格模式，即不能随便输入内容一定要是从列表选择的内容
            like: false, // 是否模糊搜索
            type: 'get', // 数据请求方式
            change: function( index, curData ){
                //alert( JSON.stringify(curData) );
            },
            render: function(){
                
            }
        });
        vm.searchBtnText = 'search';
        //vm.$nextTick(function(){alert(6666)})
        
        var vm = SearchList({
            el: '#app', // 容器
            url: '/search.php', // 数据接口地址
            structure: 'content', // 数据结构
            fieldName: "name", // 列表对应的key->value
            keyword: 'kw', // 请求数据参数字段名
            strict: false, // 是否严格模式，即不能随便输入内容一定要是从列表选择的内容
            type: 'get', // 数据请求方式
            change: function( index, curData ){
                //alert( JSON.stringify(curData) );
            },
            render: function( eleRoot ){
                //console.log( eleRoot )
            }
        });
        
    });
    </script>
</body>
</html>